<template>
    <div class="container mb-5">
        <el-row :gutter="30">
            <Skeleton :loading="totalLoading">
                <template v-slot:default>
                    <el-col v-for="(item, index) in data.statisticstotal" :span="6" :key="index">
                        <TotalCard :description="item.description" :total="item.total"/>
                    </el-col>
                </template>
            </Skeleton>
        </el-row>
        <el-row>
            <el-col :span="24" class="pt-5">
                <Skeleton :loading="userLoading" :row="9">
                    <template v-slot:default>
                        <LineChart v-if="!userLoading"
                            :title="data.userLineChart.title"
                            :legendData="data.userLineChart.legendData"
                            :xAxisData="data.userLineChart.xAxisData"
                            :series="data.userLineChart.series"
                        />
                    </template>
                </Skeleton>
            </el-col>
            <el-col :span="24" class="pt-5">
                <Skeleton :loading="projectLoading" :row="9">
                    <template v-slot:default>
                        <LineChart v-if="!projectLoading"
                            :title="data.projectLineChart.title"
                            :legendData="data.projectLineChart.legendData"
                            :xAxisData="data.projectLineChart.xAxisData"
                            :series="data.projectLineChart.series"
                        />
                    </template>
                </Skeleton>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
    import { reactive, ref, onMounted } from 'vue'
    import { ChatLineRound, Male, ArrowRight, CaretBottom, CaretTop, Warning } from '@element-plus/icons-vue'
    import TotalCard from '@/components/DashBoardTotalCard.vue'
    import LineChart from '@/components/LineChart.vue'
    import Skeleton from '@/components/Skeleton.vue'
    import { StatisticsTotal, StatisticsUser, StatisticsProject } from '@/api/common/dashBoard.js'
    
    /**
     * 骨架屏是否显示加载结束后的 DOM 结构
     */
    const totalLoading = ref(true)
    const userLoading = ref(true)
    const projectLoading = ref(true)

    const data = reactive({
        statisticstotal:[],
        userLineChart: {
            title: "用户活跃数据",
            legendData: ['新增用户数','活跃用户数'],
            xAxisData: [],
            series:[]
        },
        projectLineChart: {
            title: "尽调项目数据",
            legendData: ['新增项目数'],
            xAxisData: [],
            series:[]
        }
    })

    /**
     * 初始化方法
     */
    onMounted(() => {
        StatisticsTotal()
            .then((response) => {
                data.statisticstotal = response.data
                totalLoading.value = false
            }).catch((error) => {})
        StatisticsUser()
            .then((response) => {
                data.userLineChart.xAxisData = response.data.xaxisData
                response.data.series.forEach(element => {
                    let seriesObj = {
                        name: element.name,
                        type: 'line',
                        stack: '',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: element.data
                    }
                    data.userLineChart.series.push(seriesObj)
                });
                userLoading.value = false
            }).catch((error) =>{})
        StatisticsProject()
            .then((response) => {
                data.projectLineChart.xAxisData = response.data.xaxisData
                response.data.series.forEach(element => {
                    let seriesObj = {
                        name: element.name,
                        type: 'line',
                        stack: '',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: element.data
                    }
                    data.projectLineChart.series.push(seriesObj)
                });
                projectLoading.value = false
            }).catch((error) =>{})   
    })

</script>

<style scoped>
    .el-col {
        text-align: center;
    }
</style>